Related: #493 #496

When merged it will be possible to specify CSS styles for SVG images in the document's style tag or linked or imported style sheets. For example, these will work for SVG images inline in the XHTML:

/* Will target all svg images. */
svg rect {
  fill: rgb(0,0,255);
}
/* Will target all svg elements. */
svg rect.highlight {
  fill: rgb(255,0,0);
}
/* Only svg elements with the greenish class. */
svg.greenish circle {
  fill: rgb(0,255,0);
}
/* svg elements that are a direct child of a div with the profile class. */
div.profile > svg {
  stroke: blue;
}

For performance reasons, I decided not to inject top level selectors, so this WILL NOT work:

rect {
  fill: rgb(0,0,255);
}

Specifically, CSS selectors targeting SVG objects must be preceded by a selector that targets the SVG element itself. Otherwise, we would have to dump nearly everything into the SVG CSS.

SVG elements injected via the img tag src attribute

SVG objects such as circle inside an SVG file linked from the img tag can also be styled. However, in this case the SVG XML is detached from the XHTML so descendant and direct child selectors will not work. The class attribute is specifically copied across so that these SVGs can be targetted.

Example

<div class="profile">
  <img src="circle.svg" class="mycircle" alt="Nice circle" />
</div>

/* These will work. */
svg.mycircle circle { }
svg > circle { }

/* These won't work. */
div.profile img circle { }
div > svg circle { }
div svg.mycircle circle  { }
img circle { }

Limitations:

• Does not process rarely used immediate sibling selector correctly.